<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          round
          icon="search"
          type="primary"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <!-- 文章列表 -->
        <article-list :channel_id="item.id"></article-list>
      </van-tab>
      <!-- 频道按钮 -->
      <van-icon @click="editShow = true" color="#d0355d" name="wap-nav" />
    </van-tabs>
    <!-- 频道栏 -->
    <channel-edit
      :show.sync="editShow"
      :ownList="ownList"
      :allList="allList"
      :value="active"
      @input="active = $event"
    ></channel-edit>
  </div>
</template>

<script>
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { clickChannelsAPI, allChannelsAPI } from '@/api/channels'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data() {
    return {
      editShow: false,
      active: 0,
      ownList: [],
      allList: []
    }
  },
  async created() {
    const local = JSON.parse(localStorage.getItem('channels'))
    if (this.$store.state.tokenObj.token || !local) {
      const res = await clickChannelsAPI()
      this.ownList = res.data.channels
    } else {
      this.ownList = local
    }

    const res1 = await allChannelsAPI()
    this.allList = res1.data.channels
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 130px;
  height: 40px;
  background: url(@/assets/logo1.png) no-repeat center / contain;
}
.van-nav-bar {
  .van-button {
    width: 100px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon-search {
      color: #fff;
    }
  }
}
.van-tabs {
  ::v-deep .van-tabs__nav {
    margin-right: 36px;
    position: relative;
    .van-tabs__line {
      background-color: #d0355d;
      bottom: 20px;
    }
  }
  .van-icon {
    position: absolute;
    right: 4px;
    top: 2px;
    background-color: #fff;
    font-size: 36px;
  }
}
</style>
